<template>
  <!-- 动画
  条件： 进入/离开
  步骤：
     1：用transition标签包住动画元素
     2：加入name="后面css的前缀"
       .xxx-enter:进入动画的起点状态，进入时希望从什么状态变到正常状态
       .xxx-enter-active:进入过程中一直存在的class,常用于承载transition/animation
       .xxx-leave-to:离开动画的结束点状态，离开时希望从正常状态变到什么状态
       .xxx-leave-active:离开过程中一直存在的class,常用于承载transition/animation

   需求：拿子：居中显示
        进入时，从相对中间往左500px进入，透明度为0
        离开时，从相对中间往右500px离开，透明度为0

 -->
  <div>
    <button @click="btnClick">调用接口</button>
    <button @click="show = !show">切换</button>
    <transition name="abc">
      <div v-if="show" class="box" />
    </transition>
    <button @click="isShow = !isShow">切换2</button>
    <transition name="xxx">
      <div v-if="isShow" class="box2" />
    </transition>
  </div>
</template>
<script>
import { sysLogin } from '@/api/test'
export default {
  data() {
    return {
      show: true,
      isShow: true
    }
  },
  methods: {
    async btnClick() {
      const res = await sysLogin({
        mobile: '13800000002',
        password: '123456'
      })
      console.log(res)
    }
  }
}
</script>
<style>
.box {
  width: 300px;
  height: 300px;
  background-color: #f00;
}
.abc-enter-active {
  transition: all 2.5s;
}
.abc-leave-active {
  transition: all 2.5s;
}
.abc-enter {
  opacity: 0;
  width: 10px;
  height: 10px;
  background-color: #0f0;
}
.abc-leave-to {
  opacity: 0;
  transform: translateX(300px);
}

.box2 {
  width: 300px;
  height: 300px;
  background-color: #999;
  margin: 0 auto;
}
.xxx-enter {
  transform: translateX(-500px);
  opacity: 0;
}
.xxx-enter-active {
  transition: all 1s;
}
.xxx-leave-to {
  transform: translateX(500px);
  opacity: 0;
}
.xxx-leave-active {
  transition: all 1s;
}
</style>
